<template>
  <view id="wrap">
    <!-- <c-scroll-list ref="list" :api="getList" :apiParams="apiParams" :option="option" @load="(res)=>(list=res)">

		</c-scroll-list> -->
    <c-navBar title="我的优惠券" isSeat></c-navBar>
    <view class="nav">
      <view
        :class="navNum == 1 ? 'nav_item_active' : 'nav_item'"
        @click="switchNav(1)"
      >
        <text :class="navNum == 1 ? 'nav-text' : ''">领券中心</text>
      </view>
      <view class="cut"></view>
      <view
        :class="navNum == 2 ? 'nav_item_active' : 'nav_item'"
        @click="switchNav(2)"
      >
        <text :class="navNum == 2 ? 'nav-text' : ''">我的优惠券</text>
      </view>
    </view>
    <!-- 替换 list.list -->
    <view class="content">
      <c-scroll-list ref="list" :api="api" :apiParams="apiParams" @load="load">
        <view
          class="item"
          v-for="(item, i) in CouponList"
          :key="i"
          :class="item.isExpire == false ? '' : 'item-active'"
        >
          <view class="" v-if="navNum == 1">
            <image
              class="item-bg"
              src="../static/coupon-icon.png"
              mode=""
            ></image>
          </view>
          <view class="" v-else>
            <image
              v-if="item.userStatus == 0"
              class="item-bg"
              src="../static/coupon-icon.png"
              mode=""
            ></image>
            <image
              v-else
              class="item-bg"
              src="@/static/common/discounts2.png"
              mode=""
            ></image>
          </view>
          <view class="item-c dis_sb">
            <view class="item-c-l">
              <view class="price" v-if="item.money">
                <text style="font-size: 32rpx">￥</text>{{ item.money / 100 }}
              </view>
              <view class="newCoupon">
                {{
                  item.couponType == 1
                    ? "普通券 "
                    : item.couponType == 2
                    ? "新人券"
                    : ""
                }}
              </view>
              <view class="pCoupon">
                {{
                  item.type == 1
                    ? "满" + item.meetAmount + "减" + item.deduction
                    : item.type == 2
                    ? "打" + item.discounts / 10 + "折"
                    : item.type == 3
                    ? "抵扣" + item.deduction
                    : ""
                }}
              </view>
              <view style="width: 150rpx"> </view>
            </view>
            <view class="item-c-r dis_sb">
              <view class="item-c-r-l">
                <view class="name" style="color: #333333">
                  {{ item.couponName }}
                </view>
                <view class="">
                  有效期:{{ item.endTime ? item.endTime.substring(0, 11) : "" }}
                </view>
                <view class="df aic" @click="explainBtn(item.remarks)">
                  使用说明 <image src="@/static/common/go2.png" mode=""></image>
                </view>
              </view>
              <view class="" v-if="navNum == 1">
                <view class="item-c-r-btn" @click="getCoupon(item.id)">
                  立即领取
                </view>
              </view>
              <view class="" v-if="navNum == 2">
                <view class="item-c-r-btn" v-if="item.userStatus == 0">
                  未使用
                </view>
                <view class="item-c-r-btn1" v-if="item.userStatus == 1">
                  已使用
                </view>
                <view class="item-c-r-btn1" v-if="item.userStatus == 2">
                  已失效
                </view>
              </view>
            </view>
          </view>
        </view>
      </c-scroll-list>
    </view>
    <c-tipsPop
      :show="show"
      title="使用说明"
      :text="description"
      @close="show = false"
      @confirm="show = false"
    ></c-tipsPop>
    <c-imgTipsPopTwo
      :show="receiveShow"
      :img="popImg"
      text="快去下单使用吧！"
      title="领取成功"
      @close="closeReceive"
    ></c-imgTipsPopTwo>
    <!-- <rich-text :nodes="notice_cont"></rich-text> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navNum: 1, //切换优惠券
      apiParams: {
        //这是接口参数
        userId: uni.getStorageSync("user").userId,
      },
      api: this.$api.couponCollectionCenter,
      // option: { //这是配置信息
      // 	auto: false
      // },
      CouponList: {},
      show: false,
      show1: false, //领取成功参数
      popImg: require("../static/gou.png"),
      description: "qqqqqqqqqqqqqq",
      scrollList: [
        {
          status: 1,
          amount: 20,
          name: "优惠券名称",
          endTime: "2023/11/17",
          description: "未使用",
        },
        {
          status: 2,
          amount: "新人券",
          name: "优惠券名称",
          endTime: "2023/11/17",
          description: "已使用",
        },
      ],
      list: [],
      receiveShow: false,
    };
  },
  onShow() {
    // this.$refs.list.initList(true)
  },
  onLoad() {
    this.getCouponDescription();
  },
  methods: {
    // 关闭领取成功
    closeReceive() {
      this.receiveShow = false;
      setTimeout(() => {
        this.$refs.list.initList(true);
      });
    },

    // 切换优惠券
    switchNav(id) {
      this.navNum = id;
      if (id == 1) {
        // this.api = this.$api.couponCollectionCenter
        this.$refs.list.nowApi = this.$api.couponCollectionCenter;
      } else {
        // this.api = this.$api.myCouponList
        this.$refs.list.nowApi = this.$api.myCouponList;
      }
      console.log(this.api, "领卷");
      this.$refs.list.refresh();
    },
    explainBtn(description) {
      this.description = description;
      this.show = true;
    },
    //领券中心
    load(res) {
      this.CouponList = res.list;
      console.log("列表数据", res.list);
    },
    // 优惠券领取
    getCoupon(id) {
      this.$api
        .receiveCoupon({
          id: id,
        })
        .then((res) => {
          this.receiveShow = true;
        });
    },
    // 优惠券使用说明
    getCouponDescription() {},
  },
};
</script>

<style lang="scss" scoped>
.nav {
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  // border-bottom: 8rpx solid #F7F7F7;
  // padding-top:183rpx ;
  // box-sizing: border-box;
  // position: fixed;
  // top: 120rpx;

  .nav_item {
    width: 25%;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
    text-align: center;
  }

  .nav_item_active {
    width: 25%;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #1a1a1a;
    text-align: center;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
  }

  .nav-text {
    padding-bottom: 16rpx;
    box-sizing: border-box;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    border-bottom: 6rpx solid #ff6e4d;
  }

  .cut {
    height: 24rpx;
    border-right: 1rpx solid #b3b3b3;
  }
}

view {
  box-sizing: border-box;
}

.newCoupon {
  font-size: 48rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 800;
  color: #ffffff;
}

.pCoupon {
  font-size: 20rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  // margin-left: 10rpx;
  text-align: center;
}

.content {
  padding-top: 24rpx;
  box-sizing: border-box;
  width: 750rpx;
  height: calc(100vh - 200rpx);
  overflow: scroll;
}

#wrap {
  min-height: 100vh;
  background-color: #f7f7f7;
  width: 750rpx;
  background: linear-gradient(180deg, #ffefe5 0%, #f7f7f7 30%, #f7f7f7 100%);
  padding-top: 150rpx;
  box-sizing: border-box;

  .item {
    position: relative;
    margin-bottom: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    box-sizing: border-box;

    .item-bg {
      width: 100%;
      height: 160rpx;
    }

    .item-c {
      width: 100%;
      height: 160rpx;
      position: absolute;
      top: 0;
      z-index: 9;
      padding-top: 16rpx;
      padding-bottom: 16rpx;
      padding-left: 22rpx;
      padding-right: 30rpx;
      box-sizing: border-box;

      .item-c-l {
        color: #ffffff;
        font-size: 20rpx;
        font-weight: 500;
        // width: 140rpx;

        .price {
          font-size: 32rpx;
          font-size: 48rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          color: #ffffff;
          // margin-left: 15rpx;
          text-align: center;

          text {
            font-size: 80rpx;
          }
        }
      }

      .item-c-r {
        flex: 1;
        margin-left: 54rpx;
        height: 100%;

        .item-c-r-l {
          height: 100%;
          color: #787980;
          font-size: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
          }

          image {
            width: 16rpx;
            height: 16rpx;
            margin-left: 10rpx;
          }
        }

        .item-c-r-btn {
          width: 120rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          // background: $c-bgColor;

          border-radius: 30rpx;
          font-size: 20rpx;
          font-weight: 700;
          color: #fff;
          margin-right: 40rpx;
        }
        .item-c-r-btn1 {
          width: 120rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          // background: $c-bgColor;
          background: #d9d9d9;
          border-radius: 30rpx;
          font-size: 20rpx;
          font-weight: 700;
          color: #fff;
          margin-right: 40rpx;
        }
      }
    }
  }

  .item-active {
    .item-c {
      .item-c-r {
        .item-c-r-l {
          .name {
            color: #989ca6;
          }
        }

        .item-c-r-btn {
          background: linear-gradient(131deg, #f3f0d7 0%, #ff6d4d 72%);
        }
      }
    }
  }
}
</style>
